import React, { Component } from 'react';
import Ellipsis from '@/components/Ellipsis';
import An from '@/components/An';
import ResizeObserver from 'resize-observer-polyfill';
import { themeLight, themeDark, commonConfig, pieConfig, fitHeight } from '../config';
import styles from '../index.less';

const { defaultTheme } = commonConfig;
const {
  defaultTotalFontSize,
  defaultTitleFontSize,
  defaultTitleMarginTop,
  defaultTitleLines,
} = pieConfig;

/* eslint react/no-danger:0 */
class SinglePie extends Component {
  state = {
    height: 0,
    viewportScale: window.viewportScale,
  };

  componentDidMount() {
    this.resizeObserver();
    window.addEventListener('resize', this.resize, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  handleRoot = n => {
    this.root = n;
  };

  resize = () => {
    this.setState({ viewportScale: window.viewportScale });
  };

  resizeObserver() {
    const ro = new ResizeObserver(entries => {
      const { width, height } = entries[0].contentRect;
      this.setState(preState => {
        if (preState.width !== width || preState.height !== height) {
          return {
            height,
          };
        }
        return null;
      });
    });
    if (this.root) {
      ro.observe(this.root);
    }
  }

  render() {
    const { height: stateHeight, viewportScale } = this.state;
    const { theme = defaultTheme } = this.props;
    const { defaultPercentColor, defaultTotalColor, defaultTitleColor } =
      theme === 'dark' ? themeDark : themeLight;
    const {
      style,
      height: propsHeight,
      data,
      padding = 10 * viewportScale,
      borderSize = 4 * viewportScale,
      color = defaultPercentColor,
      totalColor = defaultTotalColor,
      unit,
      totalFontSize = defaultTotalFontSize,
      title,
      titleColor = defaultTitleColor,
      titleFontSize = defaultTitleFontSize,
      titleLines = defaultTitleLines, // 限制标题行数，若无需限制传0
      an,
      anParams = {},
      showAn = false,
    } = this.props;

    const height = propsHeight || stateHeight;
    const pieSize = height * viewportScale - padding * 2;

    return (
      <div ref={this.handleRoot} className={styles.pie} style={style} key={this.root}>
        <div style={{ padding, ...style, textAlign: 'center', fontSize: 0 }}>
          <div
            className={`${styles.chart} ${styles.singlePie}`}
            style={{
              height: pieSize,
              width: pieSize,
              border: `${borderSize}px solid ${color[0]}`,
              background: color[1],
            }}
          >
            <div
              style={{ color: totalColor, fontSize: totalFontSize * viewportScale }}
              className={styles.total}
            >
              {data + (unit || '')}
            </div>
          </div>
        </div>
        {showAn && <An num={an} block {...anParams} height={fitHeight(21)} />}
        {title && (
          <div
            style={{
              color: titleColor,
              fontSize: titleFontSize * viewportScale,
              marginTop: defaultTitleMarginTop,
              height: titleLines * fitHeight(21),
              lineHeight: `${fitHeight(21)}px`,
            }}
            className={styles.title}
          >
            <Ellipsis lines={titleLines} tooltip>
              {title}
            </Ellipsis>
          </div>
        )}
      </div>
    );
  }
}

export default SinglePie;
